<template>
	<view class="body-back-box">
		<view class="status_bar"></view>
		<view class="header-status_bar">
			<image @click="getBack()" src="/static/icon/left.png" mode=""></image>
			<text>{{ name }}</text>
		</view>
		<web-view :webview-styles="webviewStyles" :src="url"></web-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			webviewStyles: {
				progress: {
					color: '#3478f2'
				}
			},
			name: '',
			url: ''
		}
	},
	onLoad(option) {
		this.name = option.name
		this.url = option.url
	},
	methods: {
		getBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style>
.body-back-box {
	background-color: #f5f5f5;
	width: 100%;
	height: 100vh;
	padding-bottom: 30px;
	box-sizing: border-box;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #3478f2;
}

.header-status_bar {
	height: 44px;
	line-height: 44px;
	width: 100%;
	padding: 0 24rpx;
	box-sizing: border-box;
	background-color: #fff;
	text-align: center;
	background-color: #3478f2;
	position: relative;
	z-index: 65;
}

.header-status_bar > text {
	color: #fafafa;
	font-size: 40rpx;
	font-weight: 700;
}

.header-status_bar > image {
	width: 33rpx;
	height: 33rpx;
	position: absolute;
	left: 52rpx;
	top: 50%;
	transform: translateY(-50%);
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}
</style>
